fix: esbuild glob resolve error #14533

sapphi-red · 2023-10-04T12:25:52Z

Description

This PR tries to fix the scanner error in https://github.com/vitejs/vite-ecosystem-ci/actions/runs/6401781367/job/17379560146#step:8:460 (plugin-vue).

Could not resolve import("../components/**/*.vue")

This error was happening because resolveDir was not specified when resolving the script tag in Vue SFC.

vite/packages/vite/src/node/optimizer/scan.ts

Line 446 in 673f529

resolveDir: normalizePath(path.dirname(p)),

vite/packages/vite/src/node/optimizer/scan.ts

Lines 362 to 364 in 673f529

    
           build.onLoad({ filter: /.*/, namespace: 'script' }, ({ path }) => { 
        
             return scripts[path] 
        
           })

So I added them.

No loader is configured for ".vue" files: src/components/ImportType.vue

But then this new error happened. This was happening because onResolve is not called for glob imports (evanw/esbuild#3317).
https://github.com/vitejs/vite-plugin-vue/blob/e8503055b0ed29aa102b1f5b9a27f6b27a1f9713/playground/ssr-vue/src/pages/Home.vue#L31-L33
So I added a onLoad hook for namespace: 'file'.

vite/packages/vite/src/node/optimizer/scan.ts

Lines 494 to 505 in 673f529

    
           // extract scripts inside HTML-like files and treat it as a js module 
        
           build.onLoad( 
        
             { filter: htmlTypesRE, namespace: 'html' }, 
        
             htmlTypeOnLoadCallback, 
        
           ) 
        
           // the onResolve above will use namespace=html but esbuild doesn't 
        
           // call onResolve for glob imports and those will use namespace=file 
        
           // https://github.com/evanw/esbuild/issues/3317 
        
           build.onLoad( 
        
             { filter: htmlTypesRE, namespace: 'file' }, 
        
             htmlTypeOnLoadCallback, 
        
           )

~~(TODO: check if this solves vitejs/vite-plugin-vue#253)~~

Error: The following dependencies are imported but could not be resolved:
@vitejs/test-dep-import-type/deep (imported by C:/Users/green/Documents/GitHub/vite-plugin-vue/playground/ssr-vue/src/components/ImportType.vue?id=0)
Are they installed?

And but then, this new error happend. This was happening because extractImportPaths was appending import '@vitejs/test-dep-import-type/deep' to the content of script tag. (related PR: #5850)

vite/packages/vite/src/node/optimizer/scan.ts

Lines 640 to 660 in 673f529

    
           /** 
        
            * when using TS + (Vue + `<script setup>`) or Svelte, imports may seem 
        
            * unused to esbuild and dropped in the build output, which prevents 
        
            * esbuild from crawling further. 
        
            * the solution is to add `import 'x'` for every source to force 
        
            * esbuild to keep crawling due to potential side effects. 
        
            */ 
        
           function extractImportPaths(code: string) { 
        
             // empty singleline & multiline comments to avoid matching comments 
        
             code = code 
        
               .replace(multilineCommentsRE, '/* */') 
        
               .replace(singlelineCommentsRE, '') 
        
             let js = '' 
        
             let m 
        
             importsRE.lastIndex = 0 
        
             while ((m = importsRE.exec(code)) != null) { 
        
               js += `\nimport ${m[1]}` 
        
             } 
        
             return js 
        
           }

vite/packages/vite/src/node/optimizer/scan.ts

Lines 435 to 439 in 673f529

    
           // append imports in TS to prevent esbuild from removing them 
        
           // since they may be used in the template 
        
           const contents = 
        
             content + 
        
             (loader.startsWith('ts') ? extractImportPaths(content) : '')

@vitejs/test-dep-import-type/deep is a type only file and Vite fails to resolve that.
I guess this is the same error with vitejs/vite-plugin-vue#24.
We can change the test in plugin-vue to use import type for now as it wasn't working from before.

Additional context

What is the purpose of this pull request?

Bug fix
New Feature
Documentation update
Other

Before submitting the PR, please make sure you do the following

Read the Contributing Guidelines.
Read the Pull Request Guidelines and follow the PR Title Convention.
Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
Ideally, include relevant tests that fail without this PR but pass with it.

bluwy

Make sense to me 👍 Thanks for looking into this

fix: esbuild glob resolve error

673f529

sapphi-red requested a review from bluwy October 4, 2023 12:26

bluwy approved these changes Oct 5, 2023

View reviewed changes

bluwy merged commit 3615c68 into vitejs:main Oct 9, 2023
9 checks passed

sapphi-red mentioned this pull request Oct 10, 2023

chore: use import type for type only file import vitejs/vite-plugin-vue#263

Merged

9 tasks

sapphi-red deleted the fix/esbuild-glob-resolve branch October 10, 2023 10:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: esbuild glob resolve error #14533

fix: esbuild glob resolve error #14533

sapphi-red commented Oct 4, 2023 •

edited

Loading

bluwy left a comment

	build.onLoad({ filter: /.*/, namespace: 'script' }, ({ path }) => {
	return scripts[path]
	})

	// extract scripts inside HTML-like files and treat it as a js module
	build.onLoad(
	{ filter: htmlTypesRE, namespace: 'html' },
	htmlTypeOnLoadCallback,
	)
	// the onResolve above will use namespace=html but esbuild doesn't
	// call onResolve for glob imports and those will use namespace=file
	// https://github.com/evanw/esbuild/issues/3317
	build.onLoad(
	{ filter: htmlTypesRE, namespace: 'file' },
	htmlTypeOnLoadCallback,
	)

	/**
	* when using TS + (Vue + `<script setup>`) or Svelte, imports may seem
	* unused to esbuild and dropped in the build output, which prevents
	* esbuild from crawling further.
	* the solution is to add `import 'x'` for every source to force
	* esbuild to keep crawling due to potential side effects.
	*/
	function extractImportPaths(code: string) {
	// empty singleline & multiline comments to avoid matching comments
	code = code
	.replace(multilineCommentsRE, '/* */')
	.replace(singlelineCommentsRE, '')

	let js = ''
	let m
	importsRE.lastIndex = 0
	while ((m = importsRE.exec(code)) != null) {
	js += `\nimport ${m[1]}`
	}
	return js
	}

	// append imports in TS to prevent esbuild from removing them
	// since they may be used in the template
	const contents =
	content +
	(loader.startsWith('ts') ? extractImportPaths(content) : '')

fix: esbuild glob resolve error #14533

fix: esbuild glob resolve error #14533

Conversation

sapphi-red commented Oct 4, 2023 • edited Loading

Description

Additional context

What is the purpose of this pull request?

Before submitting the PR, please make sure you do the following

bluwy left a comment

Choose a reason for hiding this comment

sapphi-red commented Oct 4, 2023 •

edited

Loading